<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 合成</title>
    <style>
      body{
        background: #666;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      canvas{
        background: #fff;
      }
      h1{
        color: #fff;
        font-size: 24px;
      }
    </style>
</head>
<body>
    <h1>模式</h1>
    <canvas id="drawing" width="500" height="500" ></canvas>
    <script>
        /** @type {HTMLCanvasElement} */
        var drawing = document.getElementById('drawing')
        if (drawing.getContext) {
          const ctx = drawing.getContext('2d');
          
          const drawTable = () => {
            for (let i = 0; i < drawing.width / 10; i++) {
              let speed = 20;
              ctx.beginPath();
              // row
              ctx.moveTo(0, i * speed);             //创建一个起点
              ctx.lineTo(drawing.width, i * speed);
              // column
              ctx.moveTo(i * speed, 0);
              ctx.lineTo(i * speed, drawing.height);
              ctx.strokeStyle = 'rgba(0,0,0,.2)';
              ctx.stroke();
              ctx.closePath();
            }
          }
          drawTable()

          ctx.globalAlpha = 1

          let img = new Image()
          img.src = './imgs/dva.jpg'
          img.onload = () => {
            // ----------------------------------------
            // 1. 创建模式
            let pattern = ctx.createPattern(
              img,
              // 'repeat',    // 平铺
              // 'repeat-x',  // 横向平铺
              // 'repeat-y',  // 纵向平铺
              'no-repeat',    // 不平铺
            )
            // 2. 绘制模式
            ctx.fillStyle = pattern
            ctx.fillRect(
              50, 50,
              500, 500
            )
            // ----------------------------------------
          }

         }
    </script>
</body>
</html>
